<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
  <title>Viewing ${record.title}</title>
   <script type="text/javascript" src="/js/jquery.selectboxes.js"></script>
</head>

<body>
${tmpl_context.dummy_tabs()}
${tmpl_context.dummy_jeditable()}
${tmpl_context.fb()}
${tmpl_context.dummy_dynamicform(id=fieldset_id)}
${tmpl_context.dummy_multipleupload()}
<div class="grid_12">
    ${sidebar_left()}
    <div class="grid_9 omega">
	<div class="grid_9">
	<ul class="tabs">
        <li><a href="#metadata" class="w2">Metadata</a></li>
        <li><a href="#parties" class="w2">Parties</a></li>
        <li><a href="#events" class="w2">Events</a></li>
        <li><a href="#documents" class="w2">Documents</a></li>
   	 </ul>
	</div>
    <div class="panes">
        <div>
            <div class="grid_9">
                <div class="grid_3 alpha"><a href="${tg.url('/record/coversheet/')}${record.record_id}">Coversheet</a></div>
                <div class="grid_3"><a href="#">Clone</a></div>
                <div class="grid_3 omega"><a href="#">Delete</a></div>
            </div>
            <div class="grid_9">Click on the text of Title or Description below. The text should change into a form field
            and allow you to edit. Click on save to trigger an ajax save function
            </div>
            <div class="grid_9">
                <h3>Title</h3>
            </div>
            <div class="grid_9">
                <div class="edit" id="title_${record.record_id}">${record.title}</div> 
            </div>

            <div class="grid_9">
                <h3>Description</h3>
            </div>
            <div class="grid_9">
                <div class="edit_textile" id="description_${record.record_id}">${record.description}</div>
                <br/>
            </div>
 
            <div class="grid_9">
                <div class="grid_6 alpha"><h3>Terms</h3><a href="#" id="toggleShowHelp"><img src="/images/help_22x22.png" alt="Need Help?" /></a></div>
                <div class="grid_3 omega"><a href="#" id="addTerm"><div id="toggleTermText">Add Term</div></a></div>
                <div class="grid_9" id="enter_term">
                    <span style="error" id="term_form_error"></span>
                    ${tmpl_context.term_form(value=dict(record_id=record.record_id),child_args=dict(term_type=dict(checked='checked')))}
                </div>

                <div class="grid_9" id="showTermHelp" style="background-color:#FFD500;padding:5px;border-style:solid;border-width:1px;border-color:#FFAB00">
                    Clicking on any of the symbols below in the term list will trigger an ajax function. Thus, actions are carried out immediately
                    <table border="0" cellpadding="1" cellspacing="1">
                        <tr><td width="10%"><img src="/images/delete.png" /></td><td width="90%">
                            Delete the term completely</td></tr>
                        <tr><td width="10%"><img src="/images/right_16x16.png" /></td><td width="90%">
                            Indicates that the term provides a right or benefit</td></tr>
                        <tr><td width="10%"><img src="/images/obligation_16x16.png" /></td><td width="90%">
                            Indicates that the term implies an obligation which must be fulfilled</td></tr>
                        <tr><td width="10%"><input type="checkbox"/></td><td width="90%">
                            Check the box to indicate that the right or obligation has been fulfilled/achieved</td></tr>
                    </table>
                </div>

            </div>


        <div id="term_rows">
                <div class="grid_9" py:for="t in record.terms" id="term_row_${t.term_id}">
                    <div class="grid_1 alpha">
                        <a href="#" onclick="deleteTerm(${t.term_id})"><img src="/images/delete.png" alt="Delete" /></a>

                        <a href="#" class="right_toggler" id="ro_${t.term_id}"><img py:if="t.type=='r'" src="/images/right_16x16.png" alt="Right" /></a>
                        <a href="#" class="obligation_toggler" id="ro_${t.term_id}"><img py:if="t.type=='o'" src="/images/obligation_16x16.png" alt="Obligation" /></a>
                        
                    <input py:if="t.achieving" type="checkbox" value="${t.term_id}" id="achieving_${t.term_id}" class="achievingbox" checked="checked"/>
                    <input py:if="not t.achieving" type="checkbox" value="${t.term_id}" id="achieving_${t.term_id}" class="achievingbox"/>
                    </div>
                    <div class="grid_8 omega">
                        <div id="${t.term_id}_description">${t.description}</div>
                    </div>
                </div>
        </div>


        </div>
        <div>
            <div class="grid_9">
                <div class="grid_6 alpha">Parties</div>
                <div class="grid_3 omega">Actions</div>
            </div>
	        <div class="grid_9" py:replace="tmpl_context.update_parties_form(value={'record_id':record.record_id,'parties_involved':selected},child_args={'parties_involved':{'options':party_options}})">Input Form
            </div>
            <div class="grid_9">
                <br/>
                <form id="remote_add_party" action="/party/do_remote_add" method="POST">
                <div class="grid_3 alpha">
                    <input type="text" name="party_name" id="remote_add_party_name" value="" />
                </div>
                <div class="grid_2">
                    <input type="submit" name="party_submit" id="remote_add_party_submit" value="Add Party" />
                </div>
                <div class="grid_4 omega"><span id="add_party_err_msg" style="font-color:red;"></span></div>
                </form>
            </div>
            <div id="output1">
            </div>
        </div>
            <div>
                &nbsp; <!-- some kind of bug -> this nbsp is needed or the content below stretches off to the right -->
                <div class="grid_9" py:replace="tmpl_context.event_form(value={'r2r':redir_url,'record_id':record.record_id})">Event Form
                </div>
                <div id="output">
                    ${XML(event_template)}
                </div>
            </div>
            <div>
                <div class="grid_9">
                    <form method="POST" action="/document/do_add" enctype="multipart/form-data">
                    <input type="hidden" name="record_id" value="${record.record_id}"/>
                    <input type="file" name="doc_storage" class="multi" maxlength="2"/>
                    <input type="submit" value="Upload"/>
                    </form>
                </div>
                <div class="grid_9" py:for="d in record.docs">
                    <div class="grid_3 alpha">
                        <table border="0">
                            <tr>
                                <td><a href="/document/delete/${d.doc_id}"><img src="/images/delete.png" alt="Delete Document"/></a></td>
                                <td><a href="/document/view/${d.doc_id}"><img src="/images/edit.png" alt="View or Edit Document Metadata" /></a></td>
                                <td><a href="/document/serve/${d.doc_id}"><img src="/images/application-pdf-16x16.png" alt="Direct Download" /></a></td>
                            </tr>
                        </table>
                    </div>
                    <div class="grid_6 omega">${d.orig_name}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none" id="reminder">
    Olililiololol
</div>
    <script src="/js/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
function achievingTerm(a,b){$.getJSON("/term/markAchieving/"+a+"?achieving="+b,function(c){if(c.is_achieving=="ok")$("#achieving_"+a).attr("checked",true);else c.is_achieving=="no"&&$("#achieving_"+a).attr("checked",false)})}function getAchievingBoxState(a){return achieving=$("#achieving_"+a).is(":checked")?"yes":"no"}function amIAchieving(a){achievingTerm(a,getAchievingBoxState(a))}
function makeRight(a){var b=getAchievingBoxState(a);$("#"+a+"_description").text();$.getJSON("/term/makeright/"+a,function(c){if(c.s==true){c='<div class="grid_9" id="term_row_'+a+'">                     <div class="grid_1 alpha">                         <a href="#" onclick="deleteTerm('+a+')"><img src="/images/delete.png" alt="Delete"/></a>         <a href="#" class="right_toggler" id="ro_'+a+'"><img src="/images/right_16x16.png" alt="Right" /></a> <input type="checkbox" value="'+a+'" id="achieving_'+
a+'" class="achievingbox" />                     </div>                     <div class="grid_8 omega">                         <div id="'+a+'description">'+c.d+"</div>                     </div>                 </div>";$("#term_row_"+a).fadeOut(100).replaceWith(c).fadeIn(300)}if(b=="yes")$("#achieving_"+a).attr("checked",true);else b=="no"&&$("#achieving_"+a).attr("checked",false)})}
function makeObligation(a){var b=getAchievingBoxState(a);$("#"+a+"_description").text();$.getJSON("/term/makeobligation/"+a,function(c){if(c.s==true){c='<div class="grid_9" id="term_row_'+a+'">                     <div class="grid_1 alpha">                         <a href="#" onclick="deleteTerm('+a+')"><img src="/images/delete.png" alt="Delete"/></a>         <a href="#" class="obligation_toggler" id="ro_'+a+'"><img src="/images/obligation_16x16.png" alt="Obligation" /></a> <input type="checkbox" value="'+
a+'" id="achieving_'+a+'" class="achievingbox" />                     </div>                     <div class="grid_8 omega">                         <div id="'+a+'_description">'+c.d+"</div>                     </div>                 </div>";$("#term_row_"+a).fadeOut(100).replaceWith(c).fadeIn(300);if(b=="yes")$("#achieving_"+a).attr("checked",true);else b=="no"&&$("#achieving_"+a).attr("checked",false)}})}
function deleteTerm(a){$.getJSON("/term/delete/"+a,function(b){if(b.delete_status==0){b="term_row_"+a;document.getElementById("term_rows").removeChild(document.getElementById(b))}})}
$(document).ready(function(){$("#showTermHelp").hide();$("#success").hide();$("#fail").hide();$(".achievingbox").live("click",function(){var a=$(this).val();achievingTerm(a,getAchievingBoxState(a))});$(".right_toggler").live("click",function(){term_id=this.id.split("_")[1];makeObligation(term_id)});$(".obligation_toggler").live("click",function(){term_id=this.id.split("_")[1];makeRight(term_id)});$("#toggleShowHelp").live("click",function(){$("#showTermHelp").toggle()})});
function parseResponse(a){var b=a.kw,c=b.message;c=b.event_id;c=b.trigger;b=b.groups_involved;a=a.add_status;if(a=="ok")$("#flash").html("Thanks! That reminder was saved");else a=="fail"&&$("#flash").html("Oops! That reminder was not saved")}
function parseAddTermResponse(a){a=JSON.parse(a);var b=a.msg;if(a.add_status!=0)$("#term_form_error").html(b).addClass("error");else{a=a.add_new;b="";if(a.type=="o"){b="obligation_16x16.png";img_alt="Obligation";type_class="obligation_toggler"}else{b="right_16x16.png";img_alt="Right";type_class="right_togger"}a='<div class="grid_9" id="term_row_'+a.term_id+'">                     <div class="grid_1 alpha">                         <a href="#" onclick="deleteTerm('+a.term_id+')"><img src="/images/delete.png" alt="Delete"/></a>         <a href="#" class="'+
type_class+'" id="ro_'+a.term_id+'"><img src="/images/'+b+'" alt="Right" /></a> <input type="checkbox" value="'+a.term_id+'" id="achieving_'+a.term_id+'" class="achievingbox" />                     </div>                     <div class="grid_8 omega">                         <div class="edit_textile">'+a.description+"</div>                     </div>                 </div>";$("#term_rows").append(a).fadeIn(500);$("#term_form").resetForm()}}$.validator.setDefaults({submitHandler:function(){$("#term_form").ajaxSubmit(parseAddTermResponse)}});
$().ready(function(){$("#term_form").validate({})});
/*]]>*/

</script>

<script type="text/javascript">
function refreshReminders() { return }; /* not needed here */
$(document).ready(function() {

$('#enter_term').hide();
$('#addTerm').click(function() {
    // check the text of the inner div
    var innerDivText = $('#toggleTermText').html();
    if (innerDivText == 'Add Term') {
        $('#enter_term').fadeIn(800);
        $('#toggleTermText').html('Cancel');
    }
    else if (innerDivText == 'Cancel') {
        $('#enter_term').fadeOut(800);
        $('#toggleTermText').html('Add Term');
    }
  }
);
$('#cancelAdd').click(function() {
    $('#enter_term').fadeOut(800);
    }
);
var options = { 
        //target:        '#output1',   // target element(s) to be updated with server response 
        success:       showResponse, // post-submit callback 
        dataType:      'json',
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // bind form using 'ajaxForm' 
    $('#remote_add_party').ajaxForm(options); 
});

function showResponse(responseText,statusText) {
    var party_id = responseText['party_id'];
    var party_name = responseText['party_name'];
    var err_msg = responseText['error_msg'];
    var error_messages = new Array()
    error_messages['party_exists'] = "That party already exists!"
    error_messages['party_empty'] = "You did not enter a party!"
    error_messages['party_not_provided'] = "The server did not receive a necessary keyword - BUG!"
    if (err_msg != '') {
        
        $('#add_party_err_msg').text(error_messages[err_msg])
    }
    else {
        $('#update_parties_form_parties_involved_left').append('<option value="'+party_id+'">'+party_name+'</option>');
    }
};
</script>
</body>
</html>
